<template>
  <div>
    <div class="form">
      <el-form ref="form" :label-position="labelPosition" label-width="90px" :model="noticemessageL" :rules="rules">
        <el-form-item label="公告标题:" prop="title">
          <el-input v-model.trim="noticemessageL.title" size="small" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="发布作者:" prop="author">
          <el-input v-model.trim="noticemessageL.author" size="small" maxlength="10" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="公告内容:" prop="content">
          <Editor v-model="noticemessageL.content" :init="init"></Editor>
        </el-form-item>
        <el-form-item label="插图:">
          <el-upload
            ref="upload"
            :headers="headers"
            class="upload-demo"
            :action="upaction + '/matters/upload'"
            :file-list="fileList"
            :on-success="success"
            list-type="picture"
            :limit="1"
            :on-exceed="handleExceed"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <span style="margin-left: 10px" slot="tip" class="el-upload__tip">(只能上传jpg文件)</span>
          </el-upload>
        </el-form-item>
      </el-form>
      <div class="Submit">
        <el-button @click="Submit" type="primary" size="small" :loading="loading">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Seats from '@/api/Seats'
import env from '@/utils/env'
import Editor from '@tinymce/tinymce-vue'
import init from '@/utils/init'
export default {
  props: {
    detailsmessage: {
      type: Object,
      default() {
        return {}
      },
    },
    userid: {
      type: Number,
      default() {
        return 0
      },
    },
  },

  data() {
    var validatePass = (rule, value, callback) => {
      if (value == '') {
        callback(new Error('该项不能为空！'))
      } else {
        if (value !== '') {
          callback()
        }
      }
    }
    return {
      loading: false,
      token: '',
      init,
      headers: { Authorization: '' },
      labelPosition: 'right',
      noticemessageL: {
        author: '',
        content: '',
        id: 0,
        picture: '',
        title: '',
      },
      fileList: [],
      rules: {
        title: [{ required: true, validator: validatePass, trigger: 'blur' }],
        author: [{ required: true, validator: validatePass, trigger: 'blur' }],
        content: [{ required: true, validator: validatePass, trigger: 'blur' }],
      },
      upaction:
        process.env.NODE_ENV === 'production'
          ? env.prod.baseUrl
          : process.env.NODE_ENV === 'test'
          ? env.test.baseUrl
          : env.dev.baseUrl,
    }
  },
  watch: {
    detailsmessage(newval, oldval) {
      this.noticemessageL.title = newval.title
      this.noticemessageL.author = newval.author
      this.noticemessageL.content = newval.content
      this.noticemessageL.picture = newval.picture
      if (newval.picture != '') {
        this.fileList = [
          {
            name: 'picName',
            url: newval.picture,
          },
        ]
      } else {
        this.fileList = []
      }
    },
  },
  components: {
    Editor,
  },
  mounted() {
    this.token = localStorage.getItem('Authorization')
    this.headers = { Authorization: this.token }
  },
  methods: {
    handleExceed() {
      this.$message({
        message: '限制多只能上传一张图片！',
        type: 'error',
      })
    },
    success(res) {
      if (res.code == 200) {
        this.noticemessageL.picture = res.data.minIoUrl
        this.$message({
          message: '上传成功!',
          type: 'success',
        })
      }
    },
    Submit() {
      this.noticemessageL.id = this.userid
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          Seats.updateNotice(this.noticemessageL).then(res => {
            if (res.code == 200) {
              this.$message({
                message: '发布成功！',
                type: 'success',
              })
            }
            this.$refs.form.resetFields()
            this.$refs.upload.clearFiles()
            this.$parent.$parent.tip()
            this.loading = false
          })
        }
      })
      // console.log(this.noticemessageL)
    },
  },
}
</script>

<style lang="scss" scoped>
.form {
  width: 806px;
  margin-left: 120px;
  .Submit {
    width: 57px;
    height: 40px;
    margin: 0 auto;
  }
}
</style>
